import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
  Select,
  Button,
  Table,
  Input,
  message,
  TreeSelect,
  Modal,
  Form,
  Space,
  TimePicker,
} from "antd";
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  MinusCircleOutlined,
  PlusCircleOutlined,
} from "@ant-design/icons";
import {
  text_check,
  post_axios,
  format_time,
  get_interval_date,
  add_zero,
} from "../../utils";
import dayjs from "dayjs";
import "./index.scss";

export default function AvmTpStatus(props) {
  const { t } = useTranslation();
  const { Option } = Select;
  const [tableHeight, setTableHeight] = useState(0);
  const { RangePicker } = TimePicker;
  const { actions, setSpinning } = props;
  const [form] = Form.useForm();
  let { menu_action, user_power_lang, username, user_grade } = actions;
  user_power_lang = JSON.parse(user_power_lang);

  // 国内国外判断
  const session_company = sessionStorage.getItem("company");
  let localStorage_company = JSON.parse(localStorage.getItem("choose_company"));
  const local_company_object =
    localStorage_company &&
    localStorage_company[username] &&
    localStorage_company[username]
      ? localStorage_company[username]
      : "";

  const ventricle_type = {
    Close: {
      value: "Close",
      msg_en: "Close",
      msg_cn: "关闭",
    },
    Refrigerate: {
      value: "Refrigerate",
      msg_en: "Refrigerate",
      msg_cn: "制冷",
    },
    Heat: {
      value: "Heat",
      msg_en: "Heat",
      msg_cn: "加热",
    },
    "Non Existent": {
      value: "Non Existent ",
      msg_en: "Non Existent ",
      msg_cn: "不存在",
    },
  };
  const switch_type = {
    Close: {
      value: "Close",
      msg_en: "Close",
      msg_cn: "关",
    },
    Open: {
      value: "Open",
      msg_en: "Open",
      msg_cn: "开",
    },
  };
  const lighting_type = {
    "Always Bright": {
      value: "Always Bright",
      msg_en: "Always Bright",
      msg_cn: "常开",
    },
    "Always Closed": {
      value: "Always Closed",
      msg_en: "Always Closed",
      msg_cn: "常闭",
    },
    Auto: {
      value: "Auto",
      msg_en: "Auto",
      msg_cn: "自动",
    },
    "Daylight Sensing": {
      value: "Daylight Sensing ",
      msg_en: "Daylight Sensing ",
      msg_cn: "日光感应",
    },
  };

  const [page, setPage] = useState(1);
  const [rows, setRows] = useState(20);
  const [total, setTotal] = useState(0);
  const [com_ids_par, setCom_ids_par] = useState([]);
  const [mch_ids_par, setMch_ids_par] = useState([]);
  const [project_ids_par, setProject_ids_par] = useState([]);
  const [avm_s, setAvm_s] = useState("");
  const [avm_location_status_list, setAvm_location_status_list] = useState([]);

  const getData = async (newPage, newRows) => {
    let upMsg = {
      page: newPage ? newPage : page,
      rows: newRows ? newRows : rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      com_ids_par: com_ids_par,
      mch_ids_par: mch_ids_par,
      project_ids_par: project_ids_par,
      avm_s: avm_s,
    };
    setSpinning(true);
    let res = await post_axios("avm_tp_status", "m_query", upMsg);
    setSpinning(false);
    if (!res) return;
    setAvm_location_status_list(res.data_rows.rows);
    setTotal(res.data_rows.total);
  };
  const columns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("operate.avm"),
      dataIndex: "avm",
      align: "center",
    },
    {
      title: t("operate.box_sort_no_new"),
      dataIndex: "box_sort_no",
      align: "center",
    },
    {
      title: t("operate.light_perception"),
      align: "center",
      render: (_, record) => (
        <>{text_check(switch_type[record.light_perception])}</>
      ),
    },
    {
      title: t("operate.lighting"),
      align: "center",
      children: [
        {
          title: t("operate.pattern"),
          align: "center",
          render: (_, record) => (
            <>{text_check(lighting_type[record.lighting_mode])}</>
          ),
        },
        {
          title: t("operate.time_frame"),
          align: "center",
          width: 100,
          render: (_, record) => (
            <div>
              {record.lighting_time
                ? JSON.parse(record.lighting_time).map((item, index) => {
                    return (
                      <div key={index}>
                        {item.substring(0, 2)}:{item.substring(2, 4)} ~
                        {item.substring(4, 6)}:{item.substring(6, 8)}
                      </div>
                    );
                  })
                : ""}
            </div>
          ),
        },
      ],
    },
    {
      title: t("operate.energy_conservation"),
      align: "center",
      children: [
        {
          title: t("operate.time_frame"),
          align: "center",
          width: 100,
          render: (_, record) => (
            <div>
              {record.energy_conservation_tp_time
                ? JSON.parse(record.energy_conservation_tp_time).map(
                    (item, index) => {
                      return (
                        <div key={index}>
                          {item.substring(0, 2)}:{item.substring(2, 4)} ~
                          {item.substring(4, 6)}:{item.substring(6, 8)}
                        </div>
                      );
                    }
                  )
                : ""}
            </div>
          ),
        },
      ],
    },

    {
      title: t("operate.setting_temperature"),
      align: "center",
      children: [
        {
          title: t("operate.refrigeration"),
          align: "center",
          dataIndex: "tp_refrigerate",
        },
        {
          title: t("operate.heating"),
          align: "center",
          dataIndex: "tp_heat",
        },
      ],
    },

    {
      title: t("operate.bin"),
      align: "center",
      children: [
        {
          title: t("operate.left_bin"),
          align: "center",
          children: [
            {
              title: t("operate.pattern"),
              align: "center",
              render: (_, record) => (
                <>{text_check(ventricle_type[record.ventricle_left])}</>
              ),
            },
            {
              title: t("operate.current_temperature"),
              align: "center",
              dataIndex: "ventricle_left_tp",
            },
          ],
        },
        {
          title: t("operate.right_bin"),
          align: "center",
          children: [
            {
              title: t("operate.pattern"),
              align: "center",
              render: (_, record) => (
                <>{text_check(ventricle_type[record.ventricle_right])}</>
              ),
            },
            {
              title: t("operate.current_temperature"),
              align: "center",
              dataIndex: "ventricle_right_tp",
            },
          ],
        },
      ],
    },
    {
      title: t("operate.time"),
      align: "center",
      dataIndex: "op_time",
    },
  ];

  // 分页器
  const pageOnChange = async (page, pageSize) => {
    setPage(page);
    setRows(pageSize);
    initData(page, pageSize);
  };

  // 用户数据行点击
  const [clickRowKey, setClickRowKey] = useState("");
  const [clickRow, setclickRow] = useState({});

  const tableRowClick = (row) => {
    setClickRowKey(row.avm + "_" + row.box_sort_no);
    setclickRow(row);
    get_location_history_data({ newData: row });
  };

  const search_data = () => {
    setPage(1);
    initData(1);
  };

  const initData = (page, rows) => {
    setHis_page(1);
    setHis_total(0);

    setClickRowKey("");
    setclickRow([]);
    setVision_history_data_list([]);
    getData(page, rows);
  };

  const [vision_history_data_list, setVision_history_data_list] = useState();
  const [his_page, setHis_page] = useState(1);
  const [his_rows, setHis_rows] = useState(20);
  const [his_total, setHis_total] = useState(0);
  const get_location_history_data = async ({
    newPage = 1,
    newRows = 20,
    newData,
  }) => {
    let upMsg = {
      page: newPage ? newPage : his_page,
      rows: newRows ? newRows : his_rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      avm: newData ? newData.avm : clickRowKey.split("_")[0],
      bdate_stamp: get_interval_date(-90, "-") + " 00:00:00",
      edate_stamp: get_interval_date(0, "-") + " 23:59:59",
    };
    setSpinning(true);
    let res = await post_axios("avm_tp_status", "m_query_his", upMsg);
    setSpinning(false);
    if (!res) return;
    setVision_history_data_list(res.data_rows.rows);
    setHis_total(res.data_rows.total);
  };

  const rightColumns = [
    {
      dataIndex: "idx",
      align: "center",
      width: 40,
      render: (_, record, index) => <>{index + 1}</>,
    },
    {
      title: t("operate.box_sort_no_new"),
      align: "center",
      dataIndex: "box_sort_no",
    },
    {
      title: t("operate.temperature"),
      align: "center",
      children: [
        {
          title: t("operate.left_bin"),
          align: "center",
          dataIndex: "ventricle_left_tp",
        },
        {
          title: t("operate.right_bin"),
          align: "center",
          dataIndex: "ventricle_right_tp",
        },
      ],
    },
    {
      title: t("operate.update_time"),
      dataIndex: "op_time",
      align: "center",
    },
  ];
  // 分页器
  const hisPageOnChange = async (page, pageSize) => {
    setHis_page(page);
    setHis_rows(pageSize);
    get_location_history_data({ newPage: page, newRows: pageSize });
  };

  const [edit_tp_show, setEdit_tp_show] = useState(false);
  const energy_conservation_tp = Form.useWatch("energy_conservation_tp", form);
  const [energy_conservation_tp_time, setEnergy_conservation_tp_time] =
    useState([]);

  const lighting_mode = Form.useWatch("lighting_mode", form);
  const [lighting_time, setLighting_time] = useState([]);

  const edit_tp_dialog = () => {
    setEdit_tp_show(true);
    if (clickRowKey.value !== "") {
      let {
        avm,
        box_sort_no,
        energy_conservation_tp,
        energy_conservation_tp_time,
        light_perception,
        lighting_mode,
        lighting_time,
        tp_heat,
        tp_refrigerate,
        ventricle_left,
        ventricle_right,
      } = clickRow;
      console.log(clickRow);

      form.setFieldsValue({
        avm: avm,
        box_sort_no: box_sort_no,
        tp_heat: tp_heat,
        tp_refrigerate: tp_refrigerate,
        ventricle_left: ventricle_left,
        ventricle_right: ventricle_right,
        energy_conservation_tp: energy_conservation_tp,
        lighting_mode: lighting_mode,
        light_perception: light_perception,
      });
      if (energy_conservation_tp_time) {
        const newArr = JSON.parse(energy_conservation_tp_time).map((item) => {
          return [
            `${item.substring(0, 2)}:${item.substring(2, 4)}`,
            `${item.substring(4, 6)}:${item.substring(6, 8)}`,
          ];
        });
        setEnergy_conservation_tp_time(newArr);
      } else {
        setEnergy_conservation_tp_time([]);
      }
      if (lighting_time) {
        const time = JSON.parse(lighting_time)[0];
        setLighting_time([
          `${time.substring(0, 2)}:${time.substring(2, 4)}`,
          `${time.substring(4, 6)}:${time.substring(6, 8)}`,
        ]);
      } else {
        setLighting_time([]);
      }
    }
  };
  const add_conservation_time = () => {
    setEnergy_conservation_tp_time([...energy_conservation_tp_time, []]);
  };

  const lighting_timeOnChange = (time, timeString) => {
    console.log(time, timeString);
    setLighting_time(timeString);
  };
  const energy_conservation_tp_timeOnChange = (time, timeString, index) => {
    console.log(time, timeString);
    const newArr = energy_conservation_tp_time;
    newArr[index] = timeString;
    setEnergy_conservation_tp_time(newArr);
  };
  const remove_conservation_time = (value) => {
    if (energy_conservation_tp_time.length <= 1) {
      message.warning({
        content: t("operate.select_one_time"),
      });
      return;
    } else {
      energy_conservation_tp_time.splice(value, 1);
    }
  };
  const onFinish = (values) => {
    console.log(values);
    edit_user_confirm(values);
  };
  const onReset = () => {
    form.resetFields();
  };

  const edit_user_confirm = async (values) => {
    let upMsg = JSON.parse(JSON.stringify(values));
    //灯光模式为自动，添加自动时间
    if (upMsg.lighting_mode == "Auto") {
      const newArr = [lighting_time.join("").replace(/:/g, "")];
      upMsg["lighting_time"] = JSON.stringify(newArr);
    } else {
      upMsg["lighting_time"] = "";
    }
    // 节能模式为开，添加节能时间
    if (upMsg.energy_conservation_tp == "Open") {
      const newArr = energy_conservation_tp_time.map((item) => {
        return item.join("").replace(/:/g, "");
      });
      upMsg["energy_conservation_tp_time"] = JSON.stringify(newArr);
    } else {
      upMsg["energy_conservation_tp_time"] = "";
    }
    upMsg = Object.assign(upMsg, {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_time: format_time(new Date(), "obj"),
    });
    console.log(upMsg);
    setSpinning(true);
    let res = await post_axios("avm_tp_status", "m_modify_tp", upMsg);
    setSpinning(false);
    if (!res) return;
    search_data();
    setEdit_tp_show(false);
  };

  // 获取组织列表
  const [com_list, setCom_list] = useState([]);
  const get_com_data = async () => {
    let upMsg = {
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_com_id",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setCom_list(res.data_rows.rows);
  };

  // 筛选_获取商户列表
  const [mch_page, setMch_page] = useState(1);
  const [mch_list, setMch_list] = useState([]);
  const get_mch_data = async (newPage) => {
    let upMsg = {
      page: newPage ? newPage : mch_page,
      rows: 20,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_mch",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    const receiveRows = res.data_rows.rows;
    setMch_list([...mch_list, ...receiveRows]);
  };
  // 商户筛选框-分页
  const mch_next_page = () => {
    setMch_page(mch_page + 1);
    get_mch_data(mch_page + 1);
  };

  // 筛选_获取项目列表
  const [project_page, setProject_page] = useState(1);
  const [project_rows, setProject_rows] = useState(20);
  const [project_list, setProject_list] = useState([]);
  const get_project_data = async (newPage) => {
    let upMsg = {
      page: newPage ? newPage : project_page,
      rows: project_rows,
      company_id: local_company_object.id,
      company: local_company_object.company,
      op_type: "list_project",
    };
    let res = await post_axios("admin_oneself", "m_query", upMsg);
    if (!res) return;
    setProject_list(res.data_rows.rows);
  };
  const project_next_page = () => {
    setProject_page(project_page + 1);
    setProject_ids_par([]);
    get_project_data(project_page + 1);
  };

  useEffect(() => {
    // 挂载后或者更新后的操作
    getData().then(() => {
      const tabBoxHeight =
        document.getElementsByClassName("avm_tp_status")[0].scrollHeight;
      const tableHeight = tabBoxHeight - 96 - 70;
      setTableHeight(tableHeight);
    });
    if (user_grade < 70) {
      get_com_data();
    }
    get_mch_data();
    get_project_data();
  }, []);
  return (
    <>
      <div className="avm_tp_status modules">
        <div className="screen_ipt">
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("transaction_flow.avm")}</div>
            <Input
              placeholder=" "
              value={avm_s}
              size="small"
              allowClear={true}
              onChange={(e) => setAvm_s(e.target.value)}
            />
          </div>
          {user_grade < 70 ? (
            <div className="ipt_box ipt_box_long">
              <div className="ipt_box_title">{t("market.organization")}</div>
              <TreeSelect
                value={com_ids_par}
                treeData={com_list}
                allowClear={true}
                size="small"
                multiple
                treeCheckStrictly={true}
                fieldNames={{
                  label: "com",
                  value: "com_id",
                  children: "children",
                }}
                placeholder=" "
                treeCheckable={true}
                onChange={(newValue) => setCom_ids_par(newValue)}
              />
            </div>
          ) : (
            ""
          )}
          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("market.mch_name")}</div>
            <Select
              mode="multiple"
              size="small"
              placeholder=" "
              allowClear={true}
              value={mch_ids_par}
              options={mch_list}
              fieldNames={{
                label: "mch",
                value: "mch_id",
              }}
              onChange={(value) => setMch_ids_par(value)}
              onPopupScroll={(event) => {
                if (mch_list.length < mch_page * 20) {
                  console.log("没有更多商户的筛选数据了");
                  return;
                }
                const target = event.target;
                const residueHeight =
                  target.scrollHeight - target.scrollTop - target.clientHeight;
                if (residueHeight <= 50) {
                  mch_next_page();
                }
              }}
              optionFilterProp="mch"
            ></Select>
          </div>

          <div className="ipt_box ipt_box_long">
            <div className="ipt_box_title">{t("market.project")}</div>
            <Select
              mode="multiple"
              size="small"
              placeholder=" "
              allowClear={true}
              value={project_ids_par}
              options={project_list}
              fieldNames={{
                label: "project",
                value: "project_id",
              }}
              onChange={(value) => setProject_ids_par(value)}
              onPopupScroll={(event) => {
                if (project_list.length < project_page * 20) {
                  console.log("没有更多项目的筛选数据了");
                  return;
                }
                const target = event.target;
                const residueHeight =
                  target.scrollHeight - target.scrollTop - target.clientHeight;
                if (residueHeight <= 50) {
                  project_next_page();
                }
              }}
              optionFilterProp="project"
            ></Select>
          </div>
        </div>
        <div className="screen_btn">
          <div className="btn_box">
            {/* 修改 */}
            {menu_action.indexOf("m_modify_tp") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<EditOutlined style={{ color: "#1677FF" }} />}
                onClick={edit_tp_dialog}
              >
                {text_check(user_power_lang["m_modify_tp"])}
              </Button>
            ) : (
              ""
            )}
            {/* 删除 */}
            {menu_action.indexOf("m_del") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<DeleteOutlined style={{ color: "#1677FF" }} />}
              >
                {text_check(user_power_lang["m_del"])}
              </Button>
            ) : (
              ""
            )}

            {/* 查询 */}
            {menu_action.indexOf("m_query") > -1 ? (
              <Button
                size="small"
                type="text"
                icon={<SearchOutlined style={{ color: "#1677FF" }} />}
                onClick={search_data}
              >
                {text_check(user_power_lang["m_query"])}
              </Button>
            ) : (
              ""
            )}
          </div>
        </div>
        <div className="table_box">
          <div
            className="page-table"
            style={{
              width: "69.8vw",
            }}
          >
            <Table
              dataSource={avm_location_status_list}
              size="small"
              bordered
              columns={columns}
              rowKey="avm"
              virtual
              scroll={{
                y: tableHeight,
              }}
              onRow={(record) => {
                return {
                  onClick: () => tableRowClick(record), // 点击行
                };
              }}
              rowClassName={(record, index) => {
                if (record.avm + "_" + record.box_sort_no === clickRowKey) {
                  return "row_clicked_style";
                }
              }}
              rowHoverable={false}
              pagination={{
                defaultCurrent: page,
                defaultPageSize: rows,
                size: "small",
                current: page,
                total: total,
                responsive: true,
                showTotal: (total) =>
                  text_check({
                    msg_cn: `共 ${total} 条`,
                    msg_en: `Total ${total} items`,
                  }),
                onChange: pageOnChange,
              }}
            />
          </div>

          <div
            className="page-table"
            style={{
              width: "29.8vw",
            }}
          >
            <Table
              dataSource={vision_history_data_list}
              size="small"
              bordered
              columns={rightColumns}
              rowKey="box_sort_no"
              virtual
              scroll={{
                y: tableHeight,
              }}
              rowHoverable={false}
              pagination={{
                defaultCurrent: his_page,
                defaultPageSize: his_rows,
                size: "small",
                current: his_page,
                total: his_total,
                responsive: true,
                showTotal: (total) =>
                  text_check({
                    msg_cn: `共 ${total} 条`,
                    msg_en: `Total ${total} items`,
                  }),
                onChange: hisPageOnChange,
              }}
            />
          </div>
        </div>
      </div>

      <Modal
        forceRender
        title={t("operate.change_tp")}
        open={edit_tp_show}
        classNames={{
          body: "edit_dialog_body edit_user_ruleForm avm_tp_status_dialog",
          wrapper: "edit_user_style edit_800_style",
        }}
        onCancel={() => setEdit_tp_show(false)}
        maskClosable={false}
        destroyOnClose={true}
        footer={null}
      >
        <Form
          form={form}
          variant="filled"
          className="edit_user_ruleForm"
          labelCol={{ span: 8, offset: 0 }}
          onFinish={onFinish}
          initialValues={{ enable_verify: "enable" }}
        >
          <div className="form_classify_box">
            <div className="form_classify_title">
              {t("operate.essential_information")}
            </div>
            <div className="form_ipt_box">
              <Form.Item
                label={t("operate.avm")}
                name="avm"
                rules={[
                  {
                    required: true,
                    message: t("operate.enter_avm"),
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </div>
            <div className="form_ipt_box">
              <Form.Item
                label={t("operate.box_sort_no_new")}
                name="box_sort_no"
                rules={[
                  {
                    required: true,
                    message: t("operate.enter_sort"),
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </div>
          </div>
          <div className="form_classify_box">
            <div className="form_classify_title">
              {t("operate.setting_temperature")}
            </div>
            <div className="form_ipt_box">
              <Form.Item
                label={t("operate.refrigeration")}
                name="tp_refrigerate"
                rules={[
                  {
                    required: true,
                    message: t("operate.enter_refrigeration"),
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </div>

            <div className="form_ipt_box">
              <Form.Item
                label={t("operate.heating")}
                name="tp_heat"
                rules={[
                  {
                    required: true,
                    message: t("operate.enter_heating"),
                  },
                ]}
              >
                <Input />
              </Form.Item>
            </div>
          </div>

          <div className="form_classify_box">
            <div className="form_classify_title">
              {t("operate.control_model")}
            </div>
            <div className="form_ipt_box">
              <Form.Item
                label={t("operate.left_bin")}
                name="ventricle_left"
                rules={[
                  {
                    required: true,
                    message: t("operate.select_left_bin"),
                  },
                ]}
              >
                <Select placeholder=" ">
                  {Object.keys(ventricle_type).map((key) => {
                    return (
                      <Option value={key} key={key}>
                        {text_check(ventricle_type[key])}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>
            <div className="form_ipt_box">
              <Form.Item
                label={t("operate.right_bin")}
                name="ventricle_right"
                rules={[
                  {
                    required: true,
                    message: t("operate.select_right_bin"),
                  },
                ]}
              >
                <Select placeholder=" ">
                  {Object.keys(ventricle_type).map((key) => {
                    return (
                      <Option value={key} key={key}>
                        {text_check(ventricle_type[key])}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>
          </div>

          <div className="form_classify_box">
            <div className="form_classify_title">
              {t("operate.energy_conservation")}
            </div>
            <div className="form_ipt_box">
              <Form.Item
                label={t("operate.switch")}
                name="energy_conservation_tp"
                rules={[
                  {
                    required: true,
                    message: t("operate.select_energy_conservation"),
                  },
                ]}
              >
                <Select placeholder=" ">
                  {Object.keys(switch_type).map((key) => {
                    return (
                      <Option value={key} key={key}>
                        {text_check(switch_type[key])}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>
            {energy_conservation_tp === "Open" ? (
              <>
                {energy_conservation_tp_time.map((item, index) => {
                  return (
                    <div key={index} className="dialog_ipt_box">
                      <div className="ipt_box_title">Time{index + 1}</div>
                      <RangePicker
                        onChange={(time, timeString) =>
                          energy_conservation_tp_timeOnChange(
                            time,
                            timeString,
                            index
                          )
                        }
                        defaultValue={[
                          dayjs(item[0], "HH:mm"),
                          dayjs(item[1], "HH:mm"),
                        ]}
                        format="HH:mm"
                      />
                      <div className="follow_icon">
                        <MinusCircleOutlined style={{ fontSize: "16px" }} />
                      </div>
                    </div>
                  );
                })}
                <div className="add_icon">
                  <PlusCircleOutlined
                    style={{ fontSize: "20px" }}
                    onClick={add_conservation_time}
                  />
                </div>
              </>
            ) : (
              ""
            )}
          </div>

          <div className="form_classify_box">
            <div className="form_classify_title">{t("operate.lighting")}</div>
            <div className="form_ipt_box">
              <Form.Item
                label={t("operate.lighting_mode")}
                name="lighting_mode"
                rules={[
                  {
                    required: true,
                    message: t("operate.select_lighting"),
                  },
                ]}
              >
                <Select placeholder=" ">
                  {Object.keys(lighting_type).map((key) => {
                    return (
                      <Option value={key} key={key}>
                        {text_check(lighting_type[key])}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>
            {lighting_mode === "Auto" ? (
              <>
                <div className="dialog_ipt_box">
                  <div className="ipt_box_title">Time</div>
                  <RangePicker
                    onChange={(time, timeString) =>
                      lighting_timeOnChange(time, timeString)
                    }
                    defaultValue={[
                      dayjs(lighting_time[0], "HH:mm"),
                      dayjs(lighting_time[1], "HH:mm"),
                    ]}
                    format="HH:mm"
                  />
                </div>
              </>
            ) : (
              ""
            )}
          </div>
          <div className="form_classify_box">
            <div className="form_classify_title">
              {t("operate.light_perception")}
            </div>
            <div className="form_ipt_box">
              <Form.Item
                label={t("operate.switch")}
                name="light_perception"
                rules={[
                  {
                    required: true,
                    message: t("operate.select_light_perception"),
                  },
                ]}
              >
                <Select placeholder=" ">
                  {Object.keys(switch_type).map((key) => {
                    return (
                      <Option value={key} key={key}>
                        {text_check(switch_type[key])}
                      </Option>
                    );
                  })}
                </Select>
              </Form.Item>
            </div>
          </div>

          <div className="form_ipt_btn">
            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Space>
                <Button
                  htmlType="button"
                  onClick={() => setEdit_tp_show(false)}
                >
                  {t("common.cancel")}
                </Button>
                <Button type="primary" htmlType="submit">
                  {t("common.confirm")}
                </Button>
              </Space>
            </Form.Item>
          </div>
        </Form>
      </Modal>
    </>
  );
}
